// 导入React
import React from "react";

/**
 * this丢失问题模拟分析
 * 'use strict'
 */

// 严格模式和非严格模式
'use strict'
const obj = {
    name: 'Foo',
    handleClick: function(){
      console.log('this', this, 'this.name', this.name);
    }
};
obj.handleClick()
const handleClick = obj.handleClick;
handleClick()

// ===========================

// 下面代码演示的情况是，在类中，定义的方法在赋值时，不用指定严格模式，只要发生函数赋值this就是undefined
class Foo {
  constructor(name) {
    this.name = name;
  }
    
  handleClick() {
    console.log('this', this)
    console.log('this.name', this.name)
  }
}
const foo = new Foo('foo');
foo.handleClick()
const handleClick = foo.handleClick;
handleClick()

// =====================

// 返回函数和返回函数调用的区别，业界通俗说法，延迟调用
const fn1 = () => {console.log('fn1')}
const fn2 = () => fn1
const fn3 = () => fn1()
// 请同学们分析上面fn2和fn3的执行结果的区别是什么


// =========================

// 请同学们分析下面的handleClick
class Foo {
  constructor(name) {
    this.name = name;
    // this.handleClick = this.handleClick.bind(this)
    this.handleClick2 = this.handleClick.bind(this)

  }
    
  handleClick() {
    console.log('this', this)
    console.log('this.name', this.name)
  }
}
const foo = new Foo('foo')